<template>
    <div class="map">
        <!-- 给地图加点击事件getLocationPoint，点击地图获取位置相关的信息，经纬度啥的 -->
        <!-- scroll-wheel-zoom：是否可以用鼠标滚轮控制地图缩放，zoom是视图比例 -->
        <baidu-map
                class="bmView"
                :scroll-wheel-zoom="true"
                :zoom="zoom"
                center="沈阳"
                @click="getLocationPoint"
                ak="YOUR_APP_KEY"
        >
            <bm-view style="width: 100%; height:300px; flex: 1"></bm-view>
            <!--<van-search focus @focus="bodyScrollTop" v-model="addressKeyword" placeholder="请输入搜索地点" />-->
            <bm-local-search :keyword="addressKeyword"
                             @markersset="markerssetAction"
                             @infohtmlset="infohtmlsetAction"
                             @searchcomplete="searchcompleteAction"
                             :auto-viewport="true"
                             :pageCapacity="10"
                             :forceLocal="true"
                             :panel="false"
                             :location="locationName"></bm-local-search>
        </baidu-map>
        <input ref="search" class="search-input"
               @blur="bodyScrollTop"
               @focus="bodyScrollTop"
               type="text"
               v-model='addressKeyword'
               placeholder="请输入居住小区名称">
        <div class="search-result">
            <div class="search-item" v-for="(item, index) in searchList" :key="index">
                <div class="left">
                    <div class="title">{{ item.title }}</div>
                    <div class="address">{{ item.address }}</div>
                </div>
                <div class="right">
                    <van-button type="primary" class="btn" size="mini" @click="selectMapAction(item)">选择</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      location: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 12,
      addressKeyword: '',
      locationName: '沈阳',
      searchList: [],
      formData: [],
      tabType: '', // tab页中传入类型
      tabIndex: 0 // tab页中传入下标
    }
  },
  methods: {
    // 去苹果机型白边
    bodyScrollTop () {
      winToTop()
      // document.body && (document.body.scrollTop = 0)
    },
    init () {
      this.formData = this.$route.query && this.$route.query.formData
      this.tabType = this.$route.query && this.$route.query.type
      this.tabIndex = this.$route.query && this.$route.query.index
      console.log('地图页面tab的参数', this.tabType, '--', this.tabIndex)
      window.localStorage.setItem('formData', JSON.stringify(this.formData))
      console.log('地图页面表单初始数据', this.formData)
    },
    getLocation () {
      let isSuccess = false// 获取位置成功还是失败
      let _this = this
      if (!isSuccess) {
        this.$common.getLocation(function (option) {
          console.log('定位获取后', option)
          _this.location.lng = option.longitude
          _this.location.lat = option.latitude
          _this.zoom = 16
          console.log(_this.location.lng, '获取后经度')
          console.log(_this.location.lat, '获取后纬度')
        })
        isSuccess = true
        console.log('默认经度', this.location.lng)
        console.log('默认纬度', this.location.lat)
      }
    },
    getLocationPoint (e) {
      console.log('e--------', e)
      this.location.lng = e.point.lng
      this.location.lat = e.point.lat
      /* 创建地址解析器的实例 */
      let geoCoder = new BMap.Geocoder()
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        console.log('point--------', point)
        this.selectedLng = point.lng
        this.selectedLat = point.lat
      })
      /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, res => {
        console.log('详细', res)
      })
    },
    markerssetAction (data) {
      console.log('markersset', data)
    },
    infohtmlsetAction (data) {
      console.log(data, 'infohtmlsetAction')
    },
    searchcompleteAction (data) {
      if (data && data.Br.length > 0) {
        this.searchList = data.Br
      } else {
        this.searchList = []
      }
    },
    selectMapAction (data) {
      console.log(data, 'info')
      let tabIndex = 0
      // 地址处理
      switch (this.tabType) {
        case 'main':
          this.formData.loc_title = data.title
          this.formData.loc_address = data.address
          this.formData.loc_province = data.province
          this.formData.loc_city = data.city
          break
        case 'address':
          this.formData.address[this.tabIndex].loc_title = data.title
          this.formData.address[this.tabIndex].loc_address = data.address
          this.formData.address[this.tabIndex].loc_province = data.province
          this.formData.address[this.tabIndex].loc_city = data.city
          tabIndex = 0
          break
        case 'person':
          this.formData.person[this.tabIndex].loc_title = data.title
          this.formData.person[this.tabIndex].loc_address = data.address
          this.formData.person[this.tabIndex].loc_province = data.province
          this.formData.person[this.tabIndex].loc_city = data.city
          tabIndex = 1
          break
      }
      window.localStorage.setItem('formData', JSON.stringify(this.formData))
      this.$router.push({
        name: 'epidemic-submit',
        query: {
          tabCurrentIndex: tabIndex
        }
      })
    }
  },
  mounted () {
    this.$refs.search.focus()
    console.log('----')
    this.getLocation()
    this.init()
  }
}
</script>

<style scoped lang="less">
    .search-input {
        outline-style: none ;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 7px 7px;
        width: 100%;
        font-size: 14px;
        font-weight: 700;
        font-family: "Microsoft soft";
    }
    .search-input:focus{
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
    }
    .map {
        background-color: white;
        height: 100%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    .search-result{
        overflow: scroll;
    }

    .search-item {
        border-bottom: 1px solid #9d9d9d;
        padding: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            width: 80%;

            .title {
                font-weight: bold;
            }

            .address {
                font-size: 12px;
            }
        }

        .right {
            width: 20%;
        }
    }
</style>
